<template>
  <el-dialog title="编辑用户" :close-on-click-modal="false" :visible.sync="iseditUserDialog">
  <el-form :model="user" ref="editForm" :rules="rules" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="user.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="mobile">
      <el-input v-model="user.mobile" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="部门" prop="dept">
        <el-cascader
        v-model="deptId"
        :options="depts"
        :props="{value:'id',label:'name',children:'children'}"
        ></el-cascader>
    </el-form-item>
    <el-form-item label="角色" prop="role">
        <el-select
        v-model="roleList"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择角色">
        <el-option
        v-for="item in roles"
        :key="item.id"
        :label="item.remark"
        :value="item.id">
        </el-option>
    </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="iseditUserDialog = false">取 消</el-button>
    <el-button type="primary" @click="submitEdit">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
    props:['current'],
    data(){
        return{
            iseditUserDialog : false,
            user : {},
            rules:{
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                email:[
                    /*
                        \w: a-zA-Z-9_
                        ^\w: 只能以a-zA-Z-9_ 开头
                        [-\w]: -a-zA-z0-9_
                        [-\w]{2,}: -a-zA-z0-9_ 最低次数为2r

                    */
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {pattern: /^\w[-\w]{2,}@[-\w]{2,6}\.[a-zA-Z0-9]{2,6}$/, message: '邮箱不符合规则', trigger: 'blur' }
                ],
                mobile:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {pattern: /0?(13|14|15|18)[0-9]{9}/, message: '手机号不符合规则', trigger: 'blur' }
                ]
            },
            depts : [{
              id:'',
              name:''
            }],
            roles : [],
            roleList : [],
            deptId:[]
        }
    },
    methods:{
      //提交
      submitEdit(){
        let data = {
          sysUser :{
            id : this.user.id,
            name : this.user.name,
            mobile : this.user.mobile,
            email : this.user.email,
            deptId : Array.isArray(this.deptId)? this.deptId[this.deptId.length-1] : this.deptId
          },
          roleList : this.roleList
        }
        this.$http.put(`/user`,data,{indices:false,headers:{'Content-Type':'application/json'}}).then(res => {
          if(res.data.code ==0){
            this.$message({
              type: 'success',
              message: '修改成功!',
            });
            this.iseditUserDialog = false
            this.$emit('refresh',this.current)
          }else{
            this.$message.error('修改失败');
          }
        }) 
      }
    }
}
</script>

<style>

</style>